<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>自定义指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">

        <!-- v-big 指令 -->
        <h2>当前的 n 值是：<span v-text="n"></span></h2>
        <h2>放大 10 倍后的 n 值是：<span v-big="n"></span></h2>

        <button @click="n ++">点我 n+1</button>
        <br><br>

        <!-- v-fbind 指令 -->
        <input v-bind:value="n" type="text">
        <input v-fbind:value="n" type="text">

    </div>

    <script>
        Vue.directive('fbind', {
            bind(element, binding) {
                element.value = binding.value
            },
            inserted(element, binding) {
                element.focus()
            },
            update(element, binding) {
                element.value = binding.value
                element.focus()
            }
        })
        new Vue({
            el: '#app',
            data: {
                n: 0
            },
            directives: {
                big(element, binding) {
                    element.textContent = binding.value * 10
                }
            }
        })
    </script>
</body>
</html>